<template>
  <div class="nav_outer">
    <header id="header" class="yui-bar">
        <div>消息详情</div>
    </header>
    <div class="content">
        <div class="messages">
            <div class="message">{{detail.content}}</div>
        </div>
    </div>
    <div class="palceholder"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail:{}
    }
  },
  created(){
    let id = this.$route.params.id;
    this.loadDetail(id);
  },
  methods: {
    loadDetail(id){
      this.Http2.get(`/mobile/sysmessage/${id}`, {
      }).then(
        res => {
          this.detail = res
        }
      );
    }
  }
}
</script>

<style lang='scss' scoped>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  .content{
      padding: px2em(30);
      background: #fff;
      .message{
          margin: px2em(50) 0;
          position: relative;
          &.new:after{
              position: absolute;
              content: '';
              display: block;
              width: 5px;
              height: 5px;
              border-radius: 50%;
              background: red;
              right: 10px;
              top: 38%;
          }
      }
  }
</style>